<template>
  <div id="newsmarket">
    <div class="proCenter">
      <img src="../../public/images/5_02.jpg" alt="">
    </div>
    <div class="proTypeOne">
      <div class="proList">
        <div class="sellTime">
          <span class="icon iconfont icon-shijian-"></span>
          <span class="time">7:00 AM</span>
        </div>
        <div class="proMsg">
          <h1>即食燕窝(胶原蛋白肽型)210g</h1>
          <div class="proTag">
            <ul>
              <li>
                <span class="icon iconfont icon-shijian-"></span>
                <span class="words">进口燕窝</span>
              </li>
              <li>
                <span class="icon iconfont icon-shijian-"></span>
                <span class="words">进口燕窝</span>
              </li>
              <li>
                <span class="icon iconfont icon-shijian-"></span>
                <span class="words">进口燕窝</span>
              </li>
            </ul>
          </div>
          <ul class="shotWords">
            <li class="fs">人生苦短 学会爱自己</li>
            <li>从清晨一份即食青春燕窝开始呵护自己</li>
            <li>鲜炖鲜享，每一口都似乎营养</li>
            <li>拯救挑剔与忙碌</li>
            <li>早起喝一瓶，抓住流逝的青春</li>
          </ul>
          <div class="shopBt">
            <div class="SbLeft">
              <div class="LLeft">
                <p>$</p>
                <p>新鲜价:</p>
              </div>
              <div class="price">
                59.9
              </div>
            </div>
            <div class="SbRight">
               <span class="icon iconfont icon-gouwucheman"></span>
            </div>
          </div>
        </div>
        <div class="showImg">
          <img src="../../public/images/5新品首发_13.png" alt="">
        </div>
      </div>
      
      <div class="proList right">
        <div class="sellTime">
          <span class="icon iconfont icon-shijian-"></span>
          <span class="time">7:00 AM</span>
        </div>
        <div class="proMsg">
          <h1>即食燕窝(胶原蛋白肽型)210g</h1>
          <div class="proTag">
            <ul>
              <li>
                <span class="icon iconfont icon-shijian-"></span>
                <span class="words">进口燕窝</span>
              </li>
              <li>
                <span class="icon iconfont icon-shijian-"></span>
                <span class="words">进口燕窝</span>
              </li>
              <li>
                <span class="icon iconfont icon-shijian-"></span>
                <span class="words">进口燕窝</span>
              </li>
            </ul>
          </div>
          <ul class="shotWords">
            <li class="fs">人生苦短 学会爱自己</li>
            <li>从清晨一份即食青春燕窝开始呵护自己</li>
            <li>鲜炖鲜享，每一口都似乎营养</li>
            <li>拯救挑剔与忙碌</li>
            <li>早起喝一瓶，抓住流逝的青春</li>
          </ul>
          <div class="shopBt">
            <div class="SbLeft">
              <div class="LLeft">
                <p>$</p>
                <p>新鲜价:</p>
              </div>
              <div class="price">
                59.9
              </div>
            </div>
            <div class="SbRight">
               <span class="icon iconfont icon-gouwucheman"></span>
            </div>
          </div>
        </div>
        <div class="showImg">
          <img src="../../public/images/5新品首发_06.png" alt="">
        </div>
      </div>
    </div>
    <div class="proTypeTwo">
      <div class="title">
        <img src="../../public/images/title0.jpg" alt="">
      </div>
      <div class="proList">
        <div>
          <img src="../../public/images/newType3-0.jpg" alt="">
        </div>
        <div>
          <img src="../../public/images/newType3-0.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'templatemarket',
  data: function() {
    return {
      headImg: '',
      protype1: [],
      protype2: [],
    }
  },
  // vue 实例创建前
  beforeCreate: function() {
    
  },
  // vue 实例创建后
  created: function() {
    
  },
  // 挂载前
  beforeMount: function() {
    
  },
  // 挂载后
  mounted: function() {
    this.axios.get('/web'+'/getNewPro').then(response=>{
      let data = response.data.data;
      console.log(data);
      let Data = {
        id: '',
        imgSrc: '',
        proName: '', 
        proPrice: '',
        haveStore: '',
      };
      // 设置类别头图

      // 初始化商品数据
      
    }).catch(err=>{
      console.log(err)
    })
  },
  // 更新前
  beforeUpdate: function() {
    
  },
  // 更新hou
  updated: function() {
    
  },
  // 销毁前
  beforeDestroy: function() {
    
  },
  // 销毁后
  destroyed: function() {
    
  },
  components: {
    
  },
  methods: {
  
  }
}
</script>

<style lang="less">
@import '../style/config.less';

#newsmarket {
  .px2rem(width,1080);
  .px2rem(margin-top,360);
  .px2rem(margin-bottom,190);
  
  .proCenter {
    width: 100%;
    .px2rem(height,1490);
    
    img {
      width: 100%;
      height: 100%;
    }
  }
  
  .proTypeOne {
    .proList {
      .px2rem(height,1800);
      background-image: url(../../public/images/bg-r.png);
      background-size: 100% 100%;
      overflow: hidden;
      position: relative;
      
      .sellTime {
        .px2rem(height,97);
        .px2rem(width,280);
        .px2rem(padding-left,20);
        .px2rem(margin-top,80);
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        background-color: #9e0002;
        color: white;
        
        .icon {
          .px2rem(font-size,60);
          .px2rem(margin-right,15);
        }
        
        .time {
          .px2rem(font-size,35);
        }
      }
      
      .proMsg {
        h1 {
          color: #edc286;
          .px2rem(margin-top,110);
          .px2rem(margin-left,30);
          .px2rem(font-size,68);
        }
        
        .proTag {
          .px2rem(margin-top,70);
          .px2rem(margin-left,30);
          width: 100%;
          
          ul {
            display: flex;
            width: 100%;
            
            li {
              .px2rem(margin-right,95);
              .px2rem(width,130);
              .px2rem(height,130);
              .px2rem(padding,10);
              border: 1.5px solid #c3a19a;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              align-content: center;
              color: white;
              border-radius: 5px;
              
              .icon {
                .px2rem(font-size,72);
              }
              
              .words {
                margin-top: 3px;
                .px2rem(font-size,24);
                font-weight: 100;
              }
            }
          }
        }
      
        .shotWords {
          .px2rem(margin-top,70);
          .px2rem(margin-left,30);
          
          li {
            .px2rem(font-size,30);
            color: #e6d5ce;
            .px2rem(line-height,50);
            
          }
          
          .fs {
            .px2rem(font-size,48);
            .px2rem(height,89);
            .px2rem(margin-bottom,30);
            color: #ecc18e;
            display: inline-block;
            border-bottom: 1px solid #e6d5ce;
            font-weight: 700;
          }
        }
      
        .shopBt {
          .px2rem(width,380);
          .px2rem(height,100);
          .px2rem(margin-top,280);
          .px2rem(margin-left,30);
          background-color: white;
          overflow: hidden;
          border-radius: 8px;
          
          .SbLeft {
            float: left;
            display: flex;
            color: #e4010e;
            .px2rem(font-size,35);
            font-weight: 700;
            height: 100%;
            
            .LLeft {
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              text-align: right;
              .px2rem(font-size,25);
              .px2rem(padding-top,12);
              .px2rem(padding-bottom,12);
              .px2rem(margin-right,5);
              height: 100%;
              box-sizing: border-box;
              
              
              p {
                width: 100%;
              }
            }
            
            .price {
              .px2rem(font-size,73);
              height: 100%;
              font-weight: 700;
            }
          }
          
          .SbRight {
            float: right;
            display: flex;
            justify-content: center;
            align-items: center;
            .px2rem(font-size,72);
            color: white;
            .px2rem(height,100);
            .px2rem(width,105);
            background-color: #de010a;
            
          }
        }
      }
    
      .showImg {
        position: absolute;
        .px2rem(width,525);
        right: 0;
        .px2rem(bottom,250);
        
        img {
          width: 100%;
        }
      }
    }
    
    .right {
      background-image: url(../../public/images/bg-b.png);
      
      .proMsg {
        h1 {
          text-align: right;
          .px2rem(margin-right,30);
        }
        
        .proTag {
          ul {
            justify-content: flex-end;
          }
        }
         
        .shotWords {
          .px2rem(margin-right,30);
          
          li {
            text-align: right;
            clear: both;
          }
          
          .fs {
            float: right;
          }
        }
        
        .shopBt {
          float: right;
          .px2rem(margin-right,30);
        }
      }
      
      .showImg {
        left: 0;
        right: none;
      }
    }
  }

  .proTypeTwo {
    background-color: #6b1416;
    overflow: hidden;  
    
    .title {
      .px2rem(height,140);
      text-align: center;
      
      img {
        height: 100%;
      }
    }
    
    .proList {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      box-sizing: border-box;
      .px2rem(padding,30);
      justify-content: space-between;
      
      div {
        width: 48%;
        .px2rem(margin-bottom,30);
        
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
